<template>
  <el-carousel :interval="4000" type="card" height="400px" >
    <el-carousel-item v-for="(img,index) in imgList" :key="index">
      <img :src="img.url" class="image">
    </el-carousel-item>
  </el-carousel>
</template>


<script>
export default {
    data(){
        return{
            imgList:[
                {
                    url:require('@/static/image/1.jpg') //url: '../static/image/1.jpg'      
                },
                {
                    url:require('@/static/image/2.jpg') //url: '../static/image/2.jpg'      
                },
                {
                    url:require('@/static/image/3.png') 
                },
                {
                    url:require('@/static/image/4.jpg')      
                },
            ]
        }
    }
}
</script>
<style>
  .el-carousel__item h3 {
    color: #BBAE8A;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #A88069;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #CEC39E;
  }

  .image{
    height: 100%;
    width:100%;
    object-fit:cover;
  }
</style>